<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>弹幕4</title>
</head>

<body>
    <div id="root"></div>

    <!-- 
    comment评论
     -->

    <script src="../../../../tools/mathtool.js"></script>
    <script src="../../../../tools/animtool.js"></script>
    <script src="../../../../tools/danmu.js"></script>

    <script>
        const options = {
            innerHTML: `        
            <div id="danmu"></div>
            <div id="bottom">
                <input type="text" id="ipComment" placeholder="请输入评论内容">
                <button id="btn">发送</button>
                <div>
                    <input id="cbWanlai" type="checkbox" checked="checked"><br>
                    <label id="lbWanlai" for="cbWanlai">玩赖模式</label>
                </div>
            </div>`,
            useDefaultStyles:true,
            styles: [
                {
                    selector: "#root",
                    css: {
                        width: "800px",
                        margin: "50px auto",
                        padding: "5px",
                        border: "1px solid black"
                    }
                },
                {
                    selector: "#danmu",
                    css: {
                        width: "100 %",
                        height: "500px",
                        backgroundColor: "black",
                        marginBottom: "5px",
                        position: "relative",
                        overflow: "hidden"
                    },
                },
                {
                    selector: ".comment",
                    css: {
                        position: "absolute",
                        whiteSpace: "nowrap"
                    },
                },
                {
                    selector: "#bottom",
                    css: {
                        width: "100%",
                        display: "flex",
                        height: "50px",
                    },
                },
                {
                    selector: "#ipComment",
                    css: {
                        flexGrow: 3,
                    },
                },
                {
                    selector: "#btn",
                    css: {
                        flexGrow: 1,
                        height: "100%",
                        margin: "auto 5px",
                    },
                },
                {
                    selector: "#cbWanlai",
                    css: {
                        width: "20px",
                        height: "20px",
                    },
                },
                {
                    selector: "#lbWanlai",
                    css: {
                        fontSize: "15px",
                    },
                },
            ]
        }
        const comments = ["skrskr", "我很大你忍一下", "你爹到此一游", "你爹飘过"]
        const dm = new Danmu(root, comments)
    </script>

</body>

</html>